<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment/head::head(_,_)">
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<th:block th:replace="fragment/nav::nav" />
<main class="min-vh-100 d-flex flex-column bg-light">
    <div class="container">
        <ul class="list-unstyled" th:remove="all-but-first">
            <li th:each="article : ${page.content}">
                <!--/*@thymesVar id="article" type="cn.bincker.web.blog.material.vo.ArticleListVo"*/-->
                <article th:title="${article.title}">
                    <h4>
                        <a href="#" th:href="@{/article/{id}(id=${article.id})}" th:text="${article.title}">title</a>
                    </h4>
                    <img class="w-100" src="src/main/resources/static/favicon.ico" th:if="${article.cover}" th:src="@{/api/net-disk-files/get/{id}(id=${article.cover.id})}" alt="cover">
                    <ul class="list-unstyled clearfix">
                        <li class="float-start me-1 bg-info badge" th:each="tag : ${article.tags}"><span th:text="${tag.title}">tag1</span></li>
                    </ul>
                    <p class="m-0">
                        <time th:text="${#dates.format(article.createdDate, 'yyyy-MM-dd HH:mm:ss')}">2022-01-01</time>
                        <span th:text="${article.articleClass.title}">class</span>
                    </p>
                    <p th:text="${article.describe}">describe</p>
                </article>
            </li>
            <li>
                <article th:title="article.title">
                    <h4>
                        <a href="#">title</a>
                    </h4>
                    <ul class="list-unstyled clearfix">
                        <li class="float-start me-1 bg-info badge"><span>tag1</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag2</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag3</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag4</span></li>
                    </ul>
                    <p class="m-0">
                        <time>2022-01-01</time>
                        <span>class</span>
                    </p>
                    <p>describe</p>
                </article>
            </li>
            <li>
                <article th:title="article.title">
                    <h4>
                        <a href="#">title</a>
                    </h4>
                    <ul class="list-unstyled clearfix">
                        <li class="float-start me-1 bg-info badge"><span>tag1</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag2</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag3</span></li>
                        <li class="float-start me-1 bg-info badge"><span>tag4</span></li>
                    </ul>
                    <p class="m-0">
                        <time>2022-01-01</time>
                        <span>class</span>
                    </p>
                    <p>describe</p>
                </article>
            </li>
        </ul>
        <nav>
            <ul class="pagination justify-content-center">
                <li class="page-item"
                    th:each="index : ${#numbers.sequence(((page.number > 5) ? (5 - page.number) : 0), T(java.lang.Math).min(page.totalPages - 1, page.number + 5))}"
                    th:classappend="${index == page.number ? 'active' : ''}"
                >
                    <a class="page-link" th:text="${index + 1}" th:href="@{/index(keywords=${param.keywords},articleClassId=${param.articleClassId},tagIds=${param.tagIds},page=${index},size=${param.size})}"></a>
                </li>
            </ul>
        </nav>
    </div>
</main>
<footer th:replace="fragment/footer::footer" ></footer>
<th:block th:replace="fragment/head::script" />
</body>
</html>
